<template>
  <Header></Header>
  <DrawerTwo  v-if="isShow == true"></DrawerTwo>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;"  v-if="isShow == true">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/'+ groupId }">档案管理</el-breadcrumb-item>
    <el-breadcrumb-item>查看报告</el-breadcrumb-item>
  </el-breadcrumb>
  <div>
    <el-affix :offset="400" style="float: right;height: 60px" :position="bottom" v-if="isShow == true">
      <el-button type="primary" style="height: 60px;background-color: #CA1C1B;border: #2AB28B"  @click="onKeep">保存建议</el-button>
    </el-affix>

    <div class="report">
        <div id="print-all">
          <div id="basic">
            <div class="title">儿童膳食测评报告</div>
              <div id="createTime">报告日期：{{ report_time }}</div>
<!--            <div class="dian"></div>-->
            <el-divider  border-style="dashed"  style="border-color:#2AB28B">
              <div class="subTitle">基本信息</div>
            </el-divider>

            <div class="every">
              <div><span>姓名：</span><span>{{contents.username ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>性别：</span><span>{{contents.sex == 1 ? '女':'男' ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>出生日期：</span><span>{{birth ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>监护人姓名：</span><span>{{contents.guardian_name ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>监护人手机号：</span><span>{{contents.guardian_mobile ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>身高：</span><span>{{contents.height ?? '[]'}}CM</span></div>
            </div>
            <div class="every">
              <div><span>体重：</span><span>{{contents.weight ?? '[]'}}KG</span></div>
            </div>
            <div class="every">
              <div><span>头围：</span><span>{{contents.touwei ?? '[]'}}</span>CM</div>
            </div>
            <div class="every">
              <div><span>出生身长：</span><span>{{contents.chushengsg ?? '[]'}}CM</span></div>
            </div>
            <div class="every">
              <div><span>出生体重：</span><span>{{contents.chushengtz ?? '[]'}}KG</span></div>
            </div>
            <div class="every">
              <div><span>腹围：</span><span>{{contents.fuwei ?? '[]'}}CM</span></div>
            </div>
            <div class="every">
              <div><span>血型：</span><span>{{contents.xuexing_value ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>民族：</span><span>{{contents.minzu_value ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>与监护人关系：</span><span>{{contents.guanxi_value ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>家长受教育程度：</span><span>{{contents.jiaoyu_value ?? '[]'}}</span></div>
            </div>
            <div class="every">
              <div><span>出生情况：</span><span>{{contents.birthSituation_value ?? '[]'}}</span></div>
            </div>
            <div style="clear: both"></div>
            <div class="symptom">
              <div class="params ">
                <div class="shu"></div>
                其他信息</div>
              <div class="symptom_content">
                <div>妊娠不良习惯：{{contents.Bad_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>妊娠疾病情况：{{contents.disease_value ?? '[]'}}</div>
              </div>
            </div>
            <div style="clear: both"></div>
            <div class="symptom">
              <div class="params ">
                <div class="shu"></div>
                孩子临床表现</div>
              <div class="symptom_content">
                <div>头发：{{contents.hair_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>眼睛：{{contents.eye_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>皮肤：{{contents.skin_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>口腔：{{contents.oralCavity_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>牙齿：{{contents.tooth_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>颈部：{{contents.neck_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>神经病变：{{contents.Neuropathy_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>神经症状：{{contents.symptoms_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>体征：{{contents.sign_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>骨骼：{{contents.bones_value ?? '[]'}}</div>
              </div>
            </div>

            <div class="symptom">
              <div class="params ">
                <div class="shu"></div>
                食物过敏</div>
              <div class="symptom_content">
                <div>过敏食物：{{contents.allergy_value ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>食物不耐受：{{contents.intolerance_value ?? '[]'}}</div>
              </div>
            </div>

            <div class="symptom">
              <div class="params ">
                <div class="shu"></div>
                高危儿</div>
              <div class="symptom_content">
                <div>育龄：{{contents.childbearing_age ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>出生体重：{{contents.birth_weight ?? '[]'}}</div>
              </div>
              <div class="symptom_content">
                <div>巨大儿：{{contents.Gigantic ?? '[]'}}</div>
              </div>
               <div class="symptom_content">
                <div>阿普加评分：{{contents.Apgar_score ?? '[]'}}</div>
              </div>
               <div class="symptom_content">
                <div>产时是否感染：{{contents.Infected ?? '[]'}}</div>
              </div>
               <div class="symptom_content">
                <div>是否为高危孕妇：{{contents.high_risk ?? '[]'}}</div>
              </div>
               <div class="symptom_content">
                <div>手术产儿：{{contents.Surgical_delivery ?? '[]'}}</div>
              </div>
                <div class="symptom_content">
                <div>新生儿期死亡：{{contents.Neonatal_death ?? '[]'}}</div>
              </div>
                <div class="symptom_content">
                <div>双胎或多胎：{{contents.Twin_or_multiple ?? '[]'}}</div>
              </div>
              
            </div>

            <div style="clear: both"></div>
            <el-divider  border-style="dashed"  style="border-color:#2AB28B">
              <div class="subTitle">体成分分析</div>
            </el-divider>
            <el-card class="right-box-card"  v-if="onBmishow === 1">
              <Childcomposition></Childcomposition>
            </el-card>
            <div style="clear: both"></div>
            <el-divider  border-style="dashed"  style="border-color:#2AB28B">
              <div class="subTitle">膳食分析</div>
            </el-divider>
            <el-card class="right-box-card"  v-if="onBmishow === 1">
              <Childdietary></Childdietary>
            </el-card>
            <div style="clear: both"></div>
            <div class="params " style="margin-bottom: 30px">
              <div class="shu"></div>
              喂养建议</div>
            <el-input class="elText" v-model="form.elText"  style="width: 85%" type="textarea" clearable ></el-input>
            <div style="clear: both"></div>
            <div class="params " style="margin-bottom: 30px;margin-top: 20px">
              <div class="shu"></div>
              营养建议</div>
            <el-input class="elText" v-model="form.elTextTwo"  style="width: 85%" type="textarea" clearable ></el-input>
            <div style="clear: both"></div>
            <div class="params " style="margin-bottom: 30px;margin-top: 20px">
              <div class="shu"></div>
              医生建议</div>
            <el-input class="elText" v-model="form.elTextThree"  style="width: 85%" type="textarea" clearable ></el-input>

            <div style="clear: both"></div>
            <el-divider  border-style="dashed"  style="border-color:#2AB28B">
              <div class="subTitle">历史曲线图</div>
            </el-divider>
            <div id="myChart1" :style="{width: '33%', height: '550px', float: 'left'}"></div>
            <div id="myChart2" :style="{width: '33%', height: '550px', float: 'left'}"></div>
            <div id="myChart3" :style="{width: '33%', height: '550px', float: 'left'}"></div>
          </div>

      </div>
    </div>

    <div style="text-align: center;height: 100px;line-height: 100px">
      <el-radio-group v-model="typeActive">
        <el-radio label="全部">全部</el-radio>
        <template v-for="item in types">
          <el-radio :label="item">{{ item }}</el-radio>
        </template>
      </el-radio-group>
      <div><el-button type="primary" style="height: 60px;background-color: #CA1C1B;border: #2AB28B" @click="onClickPrint">打印报告</el-button></div>
    </div>
<!--    <button v-print="'#printMe'">Print</button>-->
  </div>
</template>

<script setup>
import {defineComponent, onMounted, ref, watch} from 'vue';
import {ElMessage} from "element-plus";
import * as api from "../api/loginHttp";
import http, {baseUrl} from "../utils/http";
import Header from './common/Header.vue';
import DrawerTwo from './common/DrawerTwo.vue';
import Childcomposition from './common/Childcomposition.vue';
import Childdietary from './common/Childdietary.vue';
import {useRoute, useRouter} from "vue-router"
import PrintJS from 'print-js'
import * as echarts from 'echarts'
import { ElNotification } from 'element-plus'

const router = useRouter()
const onBmishow  = ref(1)
const route = useRoute()
const groupId = ref()
const id = ref()
const labName = ref()
const reportId = ref()
const printId = ref()
const myChart = ref()
const myChart1 = ref()
const myChart2 = ref()

const username = ref()
const guardian = ref()
const birthStatus = ref()

const qxty = ref()
const hospital_name = ref()
const report_time = ref()
const birth = ref()
const contents = ref({})
const isShow = ref(true)
const form = ref({
  elText:'',
  elTextTwo:'',
  elTextThree:'',
})

const types = ref(['基本信息', '体成分分析', '膳食分析', '历史曲线图'])
const typeActive = ref(-1)

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId

    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth

    if( username.value && guardian.value && birthStatus.value) {
      isShow.value = false
    }

    if (groupId.value == 3) {
      labName.value = '高危儿营养测评'
    } else if (groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    }

  }
  http.get('api/archives/getGenerateStatus?id='+ id.value+'&reportId='+ reportId.value).then((res)=>{
    if(res.data.code === 0) {
      ElMessage.error(res.data.msg)
      return false;
    }
    if(res.data.data === 0) {
      http.get('api/archives/generate?id='+ id.value+'&reportId='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
        if(res.data.code === 0) {
          ElMessage.error(res.data.msg)
          return false;
        }
      })
    }
  })

  http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
    if(res.data.code === 0) {
      ElMessage.error(res.data.msg)
      return false;
    }
    birth.value = $getTimes(res.data.data.contents.birth)
    console.log(res.data.data.contents,2222222)
    contents.value = res.data.data.contents;
    report_time.value = res.data.data.times

    if(res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
      form.value.elText = res.data.data.feed_advice;
    } else {
      form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
          '给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
          '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
    }

    if(res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
      form.value.elTextTwo = res.data.data.nutrition_advice;
    } else {
      form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
          '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      if(contents._rawValue.hair_value !='' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
        form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
            '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      } else if(contents._rawValue.eye_value !='' ) {
        form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
            '长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
      } else if(contents._rawValue.skin_value !='' ) {
        form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
            '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
      } else if(contents._rawValue.sign_value !='' ) {
        form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n' +
            '营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
      } else if(contents._rawValue.sign_value !='') {
        form.value.elTextTwo = '奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
      }
    }

    form.value.elTextThree = res.data.data.doctor_advice;

  })
}

onMounted(() => {
  fetchData()
})

const  onKeep = async () =>{
  let params = form._rawValue
  params['reportId'] = reportId.value
  const res = await api.setAdvice(params);
  if(res.data.code === 1) {
    ElNotification({
      title: '建议保存成功',
      message: res.data.msg,
      type: 'success',
    })
    return false;
  } else {
    ElNotification({
      title: '建议保存失败',
      message: res.data.msg,
      type: 'error',
    })
    return false;
  }
}

function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

const onClickPrint = () => {
  let printParam = '';
  if(username.value && guardian.value && birthStatus.value) {
    printParam = "/"+username.value+"/"+guardian.value+"/"+birthStatus.value;
  }
  if (typeActive.value === '全部') {
    let PrintAll = router.resolve({
      path:  "/PrintAll/"+groupId.value+"/"+id.value+"/"+reportId.value+printParam
    });
    window.open(PrintAll.href, "_blank");
  } else {

    switch (typeActive.value){
      case '基本信息':
        let PrintMember = router.resolve({
          path:  "/PrintMember/"+groupId.value+"/"+id.value+"/"+reportId.value+printParam
        });
        window.open(PrintMember.href, "_blank");
        break
      case '体成分分析':
        let PrintAnalysis = router.resolve({
          path:  "/PrintAnalysis/"+groupId.value+"/"+id.value+"/"+reportId.value+printParam
        });
        window.open(PrintAnalysis.href, "_blank");
        break
      case '膳食分析':
        let PrintComposition = router.resolve({
          path:  "/PrintComposition/"+groupId.value+"/"+id.value+"/"+reportId.value+printParam
        });
        window.open(PrintComposition.href, "_blank");
        break
      case '历史曲线图':
        let PrintDiagram = router.resolve({
          path:  "/PrintDiagram/"+groupId.value+"/"+id.value+"/"+reportId.value+printParam
        });
        window.open(PrintDiagram.href, "_blank");
        break
    }

    // print(typeActive.value)
  }
}
onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  http.get('api/archives/viewreport?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
    hospital_name.value = res.data.data.hospital_name
    let color = ["#3EA4AA"];
    let color1 = ["#D0443B", "#3EA4AA"];
    let color2 = ["#D0443B", "#3EA4AA"];
    let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
    var arr = [];
    var arr2 = [];
    var parr = res.data.data.contents.primaryHeight;
    for (let i = 0; i < parr.length; i++) {
      arr.push(parr[i].content);
      arr2.push(parr[i].month);
    }
    var arr1 = [];
    var arr3 = [];
    var parr1 = res.data.data.contents.primaryWeight;
    for (let i = 0; i < parr1.length; i++) {
      arr1.push(parr1[i].content);
      arr3.push(parr1[i].month);
    }

    var myChart = echarts.init(document.getElementById("myChart1"));
    myChart.value = myChart;
    myChart.setOption({
      backgroundColor: "#fff",
      color: color,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function() {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "次数",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: xAxisData
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "BMI值",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "dotted"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                "rgba(83,148,208,0.15)",
                "rgba(103,194,58,0.15)",
                "rgba(226,203,80,0.15)",
                "rgba(226,115,80,0.15)"
              ]
            }
          }
        }
      ],
      series: [
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumBmi
        }
      ]
    });
    window.addEventListener("resize", function() {
      myChart.resize();
    });

    var myChart1 = echarts.init(document.getElementById("myChart2"));
    myChart1.value = myChart1;
    myChart1.setOption({
      backgroundColor: "#fff",
      color: color1,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function() {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr2
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "身高",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumHeight
        }
      ]
    });
    window.addEventListener("resize", function() {
      myChart1.resize();
    });

    var myChart2 = echarts.init(document.getElementById("myChart3"));
    myChart2.value = myChart2;
    myChart2.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function() {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr3
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "体重",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr1
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumWeight
        }
      ]
    });
    window.addEventListener("resize", function() {
      myChart2.resize();
    });
  })

});

const print = (el) => {
  PrintJS({
    printable: el,
    type:'html',
    header:null,
    targetStyles:['*'],
    style:"@page {margin:0 10mm}"
  })
}
</script>

<style scoped>
#proposal {
  width: 1075px;
  height: 456px;
  background: url('../assets/img/report_proposal.png');

}
/deep/ #elTextThree {
  width: 100%;
}
/deep/.el-textarea__inner {
  width: 946px;
  height: 157px;
  border-radius: 30px;
  border:1px solid #2AB28B;
}
#elTextTwo {
  background: #2AB28B;
}
/deep/.el-textarea {
  width: 80%;
  margin-left: 70px;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}
.shu {
  width: 5px;
  height: 30px;
  background: #2AB28B;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 5%;
}
.right-box-card {
  width: 100%;
  margin-left: 0%;
}
.el-card.is-always-shadow {
  box-shadow: none;
}

.el-card {
   border: none;
}
.report {
/*width: 595px;*/
  /*height: 842px;*/
}
.titles {
  margin-right: 20px;
}


#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
  height: 100px;
  margin-top:100px;
}
#basic #createTime {
  font-size: 16px;
  color:#999999;
  margin-left: 70%;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 40px;
  color: #2AB28B;
  /*border-bottom: 1px dashed  red;*/
}
#two {
  width: 1075px;
  height: 1244px;
  border-left: 1px #999999 solid;
  border-right: 1px #999999 solid;
  margin: 0 auto 0 auto;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break:break-all;
  margin: 60px auto 0 auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}
#basic .symptom_title {
  font-size: 20px;
  margin-top: 30px;
}
.every {
  height: 55px;
  line-height: 55px;
  width: 23%;
  float: left;
  margin-left: 10%;
  font-weight: bold;
}
#basic .symptom {
  text-align: left;
  line-height: 35px;

}
#basic .symptom .every {
  width: 30%;
  float: left;
  margin-left: 2%;
}
.symptom_content{
  width: 100%;
  float: left;
  margin-left: 120px;
}

</style>
